<template>
  <div class="sub-category">
     <van-grid :gutter="10" :column-num="3">
      <van-grid-item
        v-for="sub in categories"
        :key="sub.id"
        :icon="sub.imageUrl"
        :text="sub.title" />
    </van-grid>
  </div>
</template>

<script>
import { getSubCategories } from '@/api/category'
export default {
  name: 'SubCategory',
  data() {
    return {
      categories: [],
    }
  },
  watch: {
    $route: {
      handler(newVal) {
        const { id } = newVal.params
        getSubCategories(id)
          .then(data => {
            this.categories = data.categories
          })
      },
    },
  },
}
</script>

<style lang="less">
.sub-category {
    margin: 24px 0;
  }
</style>
